<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>平台登录</title>
    <link rel="stylesheet" href="/static/css/reset.css">
    <%--layui css--%>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        body {
            display: flex;
            flex-direction: column;
        }

        #mm-header {
            flex: 60px 0 0;
            height: 60px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            background-color: #393D49;
        }

        #mm-header .mm-h-logo {
            width: 160px;
            padding: 0 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #mm-header .mm-h-logo .mm-logo {
            width: 50px;
            height: 50px;
            border-radius: 50px;
        }

        #mm-body {
            flex: 1;
            display: flex;
        }

        #mm-body .mm-tree {
            width: 200px;
            /*padding: 0 20px;*/
            flex: 160px 0 0;
            background-color: #393D49;
        }

        #mm-body .mm-content {
            flex: 1;
        }
    </style>
</head>
<body>
<div id="mm-header">
    <div class="mm-h-logo">
        <img class="mm-logo"
             src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1848282481,120945361&fm=26&gp=0.jpg" alt="">
    </div>
    <div class="mm-h-user">
        <ul class="layui-nav">
            <li class="layui-nav-item">
                <a href="">控制台<span class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="">个人中心<span class="layui-badge-dot"></span></a>
            </li>
            <li class="layui-nav-item" lay-unselect="">
                <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">修改信息</a></dd>
                    <dd><a href="javascript:;">安全管理</a></dd>
                    <dd><a href="javascript:;">退了</a></dd>
                </dl>
            </li>
        </ul>
    </div>
</div>
<div id="mm-body">
    <div class="mm-tree">
        <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="mm-nav-tree" style="margin-right: 10px;">
            <li class="layui-nav-item layui-nav-itemed">
                <a href="javascript:;">平台用户</a>
                <dl class="layui-nav-child">
                    <dd class="layui-this"><a href="/admin/indexAdmin.jsp">用户管理</a></dd>
                    <dd><a href="/admin/indexAddAdmin.jsp">新增用户</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">解决方案</a>
                <dl class="layui-nav-child">
                    <dd><a href="">移动模块</a></dd>
                    <dd><a href="">后台模版</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">云市场</a></li>
            <li class="layui-nav-item"><a href="">社区</a></li>
        </ul>
    </div>
    <div class="mm-content">
        <table class="layui-hide" id="user-list" lay-filter="mm-content"></table>
    </div>
</div>
<%--行删除按钮--%>
<script type="text/html" id="delete-admin">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看明细</a>
</script>
<%--jquery--%>
<script src="/static/js/jquery.min.js"></script>
<%--layui js--%>
<script src="/static/layui/layui.all.js"></script>

<script>
    layui.use(['table', 'layer'], function () {
        let table = layui.table;
        let layer = layui.layer;
        table.render({
            elem: '#user-list'
            , url: '/api/admin/findAdminList'
            , cols: [[
                {checkbox: true},
                {field: 'aid', width: 180, title: 'ID', sort: true},
                {field: 'username', width: 180, title: '用户账号'},
                {field: 'password', width: 180, title: '用户密码'},
                {field: 'phone', width: 300, title: '电话号码', sort: true},
                {field: 'right', width: 200, title: '操作', toolbar: '#delete-admin', align: 'center'}
            ]]
            , page: true
            , limit: 5
            , limits: [5, 10, 20]
        });


        // 弹出层标签代码
        let detail = `
<div id="mm-detail">
    <div>用户ID：<span class="aid"></span></div>
    <div>用户账号：<span class="username"></span></div>
    <div>用户密码：<span class="password"></span></div>
    <div>手机号码：<span class="phone"></span></div>
</div>
        `

        // 监听行事件
        table.on('tool(mm-content)', function (obj) {
            let data = obj.data; // 获取当前行的数据
            let event = obj.event;// 获取当前行的事件
            // console.log(data)
            // console.log(event)
            // 删除
            if (event === 'del') {
                layer.confirm('真的删除么', function (index) {
                    // obj.del(); //删除对应行（tr）的DOM结构
                    // layer.close(index);
                    //向服务端发送删除指令
                    // request ：  /api/admin/delete?aid=1
                    window.location.href = '/api/admin/delete?aid=' + data.aid; // 模拟一个超链接的请求

                });
            }

            // 查看明细
            if (event === 'detail') {
                //  url = /api/admin/detail?aid=1
                // 默认返回的就是json
                $.getJSON('/api/admin/detail', {aid: data.aid}, function (data) {
                    if (data != null) {
                        // 弹出层
                        layer.open({
                            type: 1,
                            title: "用户明细", //不显示标题栏
                            closeBtn: true,
                            shadeClose: true,
                            area: '500px;',
                            shade: 0.8,
                            id: 'lay_detail', //设定一个id，防止重复弹出
                            btnAlign: 'c',
                            moveType: 1,//拖拽模式，0或者1
                            content: detail,
                            success: function (layero, index) {
                                // 渲染数据
                                $("#mm-detail .aid").text(data.aid)
                                $("#mm-detail .username").text(data.username)
                                $("#mm-detail .password").text(data.password)
                                $("#mm-detail .phone").text(data.phone)
                            }
                        })
                    } else {
                        alert('用户已删除')
                    }
                })
            }
        })
    });
</script>
</body>
<%--<div id="mm-detail">测试弹出层</div>--%>
</html>
